<template>
    <div class="questionnaire-box">
        
        <div v-if="viewFailed">
            <a-result status="warning" title="问卷加载失败，请刷新或重新扫码。">
            </a-result>
            <div style="display: flex;justify-content: center;">
                <a-button 
                class="blue-btn"
                type="primary" 
                @click="reloadBtn">重新加载</a-button>
            </div>
            
        </div>
        <div v-if="questionnaireData.ftjrq">
            <a-result status="success" title="问卷已提交，感谢您的支持！">
            </a-result>
        </div>
        <div class="questionnaire-data" v-if="!viewFailed && !questionnaireData.ftjrq">
            <div style="text-align: center;">
                <h1>xx壮族自治区食品药品审评查验中心</h1>
            </div>
            <div style="text-align: center;">
                <h2 style="color: #0000FF;">{{ questionnaireData.fwjbt }}</h2>
            </div>
            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ questionnaireData.fwjms }}</h4>
            <div>
                <div v-for="(item,index) in questionnaireList" :key="item.id">
                    <span class="title one-t">{{ item.dbt }}</span><!--一级标题-->
                    <div v-for="(secondary,sIndex) in item.wjtmList" :key="secondary.id">
                        <div :id="secondary.selectId">
                            <span class="title topic"> {{sIndex+1}}、{{ secondary.fwjtm }}</span> <!--二级标题-->
                             <a-button 
                             class="blue-btn" 
                             v-if="secondary.fsftxxdyj  == '是'" 
                             type="primary" 
                             @click="addClick(secondary.id)" size="small">添加</a-button>
                        </div>
                        <div style="margin-left: 15px;margin-bottom: 15px;" v-if="secondary.fsfczxx == '是' && secondary.fsftxxdyj  == '否'"><!--选项-->
                            <div 
                            v-for="(answer,aIndex) in secondary.wjtmxxList" 
                            :key="answer.id" 
                            class="answer-select" 
                            @click.stop="termBlur({fwjtxtmid:secondary.id,id:answer.id})"
                            >
                                <span> {{ answer.fwjtmxx }}</span><!--选项标题-->
                                <span class="frame" v-if="answer.fsfxz == '否'"></span>
                                <span class="frame" v-if="answer.fsfxz == '是'">√</span>
                            </div>
                        </div>
                        <div style="margin-left: 20px; margin-bottom: 15px;" v-if="secondary.fsftxxdyj  == '是'">
                            <div v-for="(answer,aIndex) in secondary.wjtmxxList" :key="answer.id">
                                <div>
                                    <span>（{{ answer.fxh }}）条款号</span>
                                    <vxe-textarea 
                                    v-model="answer.ftkh" 
                                    placeholder="请输入需修订内容" 
                                    :autosize="{ minRows: 1, maxRows: 10000 }"
                                    @blur="termBlur({ftkh:answer.ftkh,id:answer.id,fwjtxtmid:secondary.id})"
                                    ></vxe-textarea>
                                </div>
                                <div>
                                    <span>需修订内容：</span>
                                    <vxe-textarea 
                                    v-model="answer.fxxdnr" 
                                    placeholder="请输入需修订内容" 
                                    :autosize="{ minRows: 1, maxRows: 10000 }"
                                    @blur="termBlur({fxxdnr:answer.fxxdnr,id:answer.id,fwjtxtmid:secondary.id})"
                                    ></vxe-textarea>
                                </div>
                                <div>
                                    <span>修订理由：</span>
                                    <vxe-textarea 
                                    v-model="answer.fxdly" 
                                    placeholder="请输入修订理由" 
                                    :autosize="{ minRows: 1, maxRows: 10000 }"
                                    @blur="termBlur({fxdly:answer.fxdly,id:answer.id,fwjtxtmid:secondary.id})"
                                    ></vxe-textarea>
                                </div>
                                <div>
                                    <span>修订意见：</span>
                                    <vxe-textarea 
                                    v-model="answer.fxdyj" 
                                    placeholder="请输入修订意见" 
                                    :autosize="{ minRows: 1, maxRows: 10000 }"
                                    @blur="termBlur({fxdyj:answer.fxdyj,id:answer.id,fwjtxtmid:secondary.id})"
                                    ></vxe-textarea>
                                </div>
                            </div>
                        </div>
                        <div :id="secondary.difficultyId" style="margin-left: 20px; margin-bottom: 15px;" v-if="secondary.fsftxczkn == '是'"><!--存在困难-->
                            <span v-if="sIndex !== 9">文件名称：</span>
                            <span v-else>中心编制____名：</span>
                            <vxe-textarea 
                            v-model="secondary.fczkn" 
                            :placeholder="sIndex !== 9?'请输入文件名称':'请输入中心编制'" 
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            @blur="termBlur({fczkn:secondary.fczkn,fwjtxtmid:secondary.id})"
                            ></vxe-textarea>
                        </div>
                        <div :id="secondary.opinionId" style="margin-left: 20px; margin-bottom: 15px;" v-if="secondary.fsftxyjjy == '是'"><!--建议-->
                            <span v-if="secondary.fwjtm == '企业成立时间'"></span>
                            <span v-else-if="sIndex !== 0 && sIndex !== 1 && sIndex !== 9" >认定办法：</span>
                            <span v-if="sIndex == 9">分中心隶属单位：</span>
                            
                            <a-date-picker
                             v-if="secondary.fwjtm == '企业成立时间'" 
                             v-model:value="secondary.fyjjy" 
                             placeholder="请选择企业成立时间"
                             @change="termBlur({fyjjy:moment(secondary.fyjjy).format('YYYY-MM-DD'),fwjtxtmid:secondary.id})"
                            />
                            <vxe-textarea 
                            v-else
                            v-model="secondary.fyjjy" 
                            :placeholder="sIndex == 0 || sIndex == 1?'请输入人数':(sIndex == 9?'分中心隶属单位':'请输入认定办法')" 
                            :autosize="{ minRows: 2, maxRows: 10000 }"
                            @blur="termBlur({fyjjy:secondary.fyjjy,fwjtxtmid:secondary.id})"
                            ></vxe-textarea>
                        </div>
                        <div :id="secondary.mailboxId" style="margin-left: 20px; margin-bottom: 15px;" v-if="secondary.fsftxyxdz  == '是'">
                            <span>出台时间：</span>
                            <div></div>
                            <!-- <vxe-textarea 
                            v-model="secondary.fyxdz" 
                            placeholder="请输入出台时间" 
                            :autosize="{ minRows: 1, maxRows: 10000 }"
                            @blur="termBlur({fyxdz:secondary.fyxdz,fwjtxtmid:secondary.id})"
                            ></vxe-textarea> -->
                            <a-date-picker format="YYYY-MM-DD" v-model:value="secondary.fyxdz" @change="termBlur({fyxdz:moment(secondary.fyxdz).format('YYYY-MM-DD'),fwjtxtmid:secondary.id})"/>
                        </div>
                    </div>
                </div>
            </div>
            <div style="display: flex;justify-content: center;width: 100%;">
                <a-button 
                class="blue-btn"
                type="primary" 
                @click="submitTo">提交</a-button>
                </div>
        </div>
    </div>
</template>
<script>
import {wjjbxxPageList,initWjjbxx,initPersonWjjbxx,selectDjDa,submitWj,deleteBatchWjjbxx,viewWjjbxx,addWjtxtmxx} from './service/index'
import moment from 'moment'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            moment:moment,
            questionnaireData:{},
            questionnaireList:[],
            viewFailed:false,
            formArrCollect:[],
            vocabulary:['是','有','同意','愿意']
        }
    },
    watch:{

    },
    mounted(){
        //console.log('1',window.localStorage.getItem('questionnaireId'))
        
        this.getDataList()
        
    },
    methods:{
        reloadBtn(){
            window.localStorage.setItem('questionnaireId','')
            this.getDataList()
        },
        getDataList(){
            if(window.localStorage.getItem('questionnaireId') && window.localStorage.getItem('testPaperId') == this.$route.query.id){
                this.viewWjjbxxData(window.localStorage.getItem('questionnaireId'))
            }else{
                let data = {id:this.$route.query.id}
                if(this.$route.query.valueInfo){
                    data = {...JSON.parse(this.$route.query.valueInfo),...data}
                    initPersonWjjbxx(data).then(res=>{
                        if(res.code == 200){
                            this.viewWjjbxxData(res.result.wjjbxx.id)
                            window.localStorage.setItem('questionnaireId', res.result.wjjbxx.id);
                            window.localStorage.setItem('testPaperId', this.$route.query.id);
                        }else{
                            this.$message.warning(res.message)
                        }
                        //console.log('2',window.localStorage.getItem('questionnaireId'))
                    })
                }else{
                    initWjjbxx(data).then(res=>{
                        if(res.code == 200){
                            this.viewWjjbxxData(res.result.wjjbxx.id)
                            window.localStorage.setItem('questionnaireId', res.result.wjjbxx.id);
                            window.localStorage.setItem('testPaperId', this.$route.query.id);
                        }else{
                            this.$message.warning(res.message)
                        }
                        //console.log('2',window.localStorage.getItem('questionnaireId'))
                    })
                }
                
            }
        },
        viewWjjbxxData(id){
            viewWjjbxx({id:id}).then(res=>{
                if(res.code == 200){
                    if(res.result.wjjbxx){
                        this.formArrCollect = []
                        if(res.result.dbtList && res.result.dbtList.length){
                            res.result.dbtList.forEach((item,index) => {
                                item.wjtmList.forEach((secondary,sIndex)=>{
                                    if(secondary.fsftxxdyj == '否' && secondary.fsfczxx == '是' && !secondary.fxzdz){//不是修订内容而是选项，然以后又没选答案
                                        this.formArrCollect.push('id'+index+''+sIndex+'fsfczxx')
                                        res.result.dbtList[index].wjtmList[sIndex].selectId = 'id'+index+''+sIndex+'fsfczxx'
                                    }
                                    if(secondary.fsftxczkn == '是' && !secondary.fczkn && this.vocabulary.indexOf(secondary.fxzdz) !== -1 ){//存在困难,答案为是、同意的时候
                                        this.formArrCollect.push('id'+index+''+sIndex+'fczkn')
                                        res.result.dbtList[index].wjtmList[sIndex].difficultyId = 'id'+index+''+sIndex+'fczkn'
                                    }
                                    if(secondary.fsftxyjjy == '是' && secondary.fsfczxx == '是' && !secondary.fyjjy && this.vocabulary.indexOf(secondary.fxzdz) !== -1 ){//意见,答案为是、同意的时候
                                        this.formArrCollect.push('id'+index+''+sIndex+'fyjjy')
                                        res.result.dbtList[index].wjtmList[sIndex].opinionId = 'id'+index+''+sIndex+'fyjjy'
                                    }
                                    if(secondary.fwjtm == '企业成立时间' && secondary.fsftxyjjy == '是' && !secondary.fyjjy && this.vocabulary.indexOf(secondary.fxzdz) !== -1){
                                        this.formArrCollect.push('id'+index+''+sIndex+'establish')
                                        res.result.dbtList[index].wjtmList[sIndex].opinionId = 'id'+index+''+sIndex+'establish'
                                    }
                                    if(secondary.fsftxyxdz == '是' && !secondary.fyxdz && this.vocabulary.indexOf(secondary.fxzdz) !== -1 ){//邮箱,答案为是、同意的时候
                                        this.formArrCollect.push('id'+index+''+sIndex+'fyxdz')
                                        res.result.dbtList[index].wjtmList[sIndex].mailboxId = 'id'+index+''+sIndex+'fyxdz'
                                    }
                                    
                                    // secondary.wjtmxxList.forEach((answer,aIndex)=>{
                                    //     this.formArrCollect[index+''+sIndex+''+aIndex+'Form'] = this.$form.createForm(this, { name: index+''+sIndex+''+aIndex+'Form' })
                                    //     res.result.dbtList[index].wjtmList[sIndex].wjtmxxList[aIndex].formName = index+''+sIndex+''+aIndex+'Form'
                                    // })
                                })
                            });
                        }
                        this.questionnaireData = res.result.wjjbxx
                        this.questionnaireList = res.result.dbtList
                        //console.log('最后的数据',this.questionnaireList)
                        //console.log('最后的数据',this.formArrCollect)
                    }else{
                        let data = {id:this.$route.query.id}
                        if(this.$route.query.valueInfo){
                            data = {...JSON.parse(this.$route.query.valueInfo),...data}
                            initPersonWjjbxx(data).then(res=>{
                                if(res.code == 200){
                                    this.viewWjjbxxData(res.result.wjjbxx.id)
                                    window.localStorage.setItem('questionnaireId', res.result.wjjbxx.id);
                                }else{
                                    this.$message.warning(res.message)
                                }
                                //console.log('2',window.localStorage.getItem('questionnaireId'))
                            })
                        }else{
                            initWjjbxx(data).then(res=>{
                                if(res.code == 200){
                                    this.viewWjjbxxData(res.result.wjjbxx.id)
                                    window.localStorage.setItem('questionnaireId', res.result.wjjbxx.id);
                                }else{
                                    this.$message.warning(res.message)
                                }
                                //console.log('2',window.localStorage.getItem('questionnaireId'))
                            })
                        }
                        
                    }
                }else{
                    this.viewFailed = true
                }
            })
        },
        //保存-----选项和输入框保存
        termBlur(data){
            //console.log(data)
            selectDjDa(data).then(res=>{
                if(res.code == 200){
                    this.viewWjjbxxData(window.localStorage.getItem('questionnaireId'))
                }else{
                    this.$message.warning(res.message)
                    this.viewWjjbxxData(window.localStorage.getItem('questionnaireId'))
                }
            })
        },
        //添加
        addClick(id){
            addWjtxtmxx({fwjtxtmid:id}).then(res=>{
                if(res.code == 200){
                    this.viewWjjbxxData(window.localStorage.getItem('questionnaireId'))
                }
            })
        },
        //提交
        submitTo(){
            // if(this.formArrCollect.length){
            //     document.querySelector('#'+this.formArrCollect[0]).scrollIntoView({
            //         behavior: "smooth"
            //     });
            //     if(this.formArrCollect[0].indexOf('fsfczxx') !== -1){
            //         this.$message.warning('请完成答题')
            //     }else if(this.formArrCollect[0].indexOf('fczkn') !== -1){
            //         this.$message.warning('请完成答题')
            //     }else if(this.formArrCollect[0].indexOf('fyjjy') !== -1){
            //         this.$message.warning('请完成答题')
            //     }else if(this.formArrCollect[0].indexOf('fyxdz') !== -1){
            //         this.$message.warning('请完成答题')
            //     }else if(this.formArrCollect[0].indexOf('establish') !== -1){
            //         this.$message.warning('请完成答题')
            //     }
            // }else{
                //console.log('走到提交了哦')
                submitWj({id:this.questionnaireData.id}).then(res=>{
                    if(res.code == 200){
                        this.viewWjjbxxData(window.localStorage.getItem('questionnaireId'))
                        this.$message.success(res.message)
                        window.localStorage.removeItem('questionnaireId')
                        window.localStorage.removeItem('testPaperId')
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            // }
            
        },

    }
}
</script>
<style lang="less" scoped>
.questionnaire-box{
    
    .questionnaire-data{
        height: 100vh; 
        overflow-y: auto;
        padding: 15px;
        font-size: 18px;
        .answer-select{
            display: flex;
            align-items: center;
            margin: 5px;
            padding-right: 20px;
            .frame{
                top: 4px;
                margin-left: 5px;
                display: inline-block;
                width: 18px;
                height: 18px;
                text-align: center;
                border: 1px solid #000;
                line-height: 1;
                color: #1890ff;
            }
        }
    }
    .title{
        font-size: 20px;
        

    }
    .one-t{
        display: inline-block;
        margin:10px;
        font-weight: 600;
    }
    .topic{
        font-size: 18 !important;
        display: inline-block;
        margin:10px;
    }
    
}

.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
</style>